var app = new Vue({
  el: '#app',
  data: {

    forest: {
      width: $('#forest')[0].offsetWidth,
      height: $('#forest')[0].offsetHeight
    },

    dog: {
      width: $('#dog')[0].offsetWidth,
      height: $('#dog')[0].offsetHeight,
      x: 0,
      y: 0,
      step: {
        x: 50,
        y: 2
      },
      抓捕时间: 0,
      与狐狸的距离: 999,
      抓捕成功: false,
      class : '',
      平均抓捕时间: 0,
      logs: []
    },

    fox: {
      width: $('#fox')[0].offsetWidth,
      height: $('#fox')[0].offsetWidth,
      x: 0,
      y: 100,
      class: ''
    },

    btn_play_again: {
      class: ''
    }
  },
  methods: {

    move_dog() {

      if( this.dog.抓捕成功 ) return

      this.dog.x += this.dog.step.x
      this.dog.y += this.dog.step.y
      this.dog.抓捕时间 = Math.round( (this.dog.抓捕时间 + 0.1) * 10 ) / 10

      this.dog.与狐狸的距离 = getDistanceBetweenTwoPoints(
        this.dog.x,
        this.dog.y,
        this.fox.x,
        this.fox.y
      )

    },

    change_dog_direct(k){

      // 左、右
      if( k === 37 && this.dog.step.x > 0 || k === 39 && this.dog.step.x < 0 ){
        this.dog.step.x = - this.dog.step.x
      }

      // 上、下
      if( k === 38 && this.dog.step.y > 0 || k === 40 && this.dog.step.y < 0 ){
        this.dog.step.y = - this.dog.step.y
      }

    },

    change_dog_direct_use_keyboard( event ){
      event.preventDefault()
      this.change_dog_direct( event.keyCode )
    },
    
    bounce_dog(){
      if( this.dog.抓捕成功 ){
        this.dog.class = this.dog.class ? '': 'animated bounce'
        this.btn_play_again.class = this.btn_play_again.class ? '': 'animated swing delay-1s'
      }
        
    },

    random_fox(){

      if( this.dog.抓捕成功 ) return

      this.fox.x = Math.ceil( Math.random() * this.forest.width / 2 )
      this.fox.y = Math.ceil( Math.random() * ( this.forest.height - this.fox.height ))
      this.fox.class = this.fox.class ? '': 'animated jello'
    },

    play_again(){
      if( !this.dog.抓捕成功 ) return

      this.dog.抓捕成功 = false
      this.dog.抓捕时间 = 0
      this.fox.x = 0
      this.fox.y = 100
    }

  },
  mounted: function(){
    this.timer1 = setInterval( this.move_dog, 100 )
    this.timer2 = setInterval( this.random_fox, 1000 )
    this.timer3 = setInterval( this.bounce_dog, 2000 )
    window.addEventListener('keydown', this.change_dog_direct_use_keyboard )
  },

  watch: {

    'dog.x' : function(){
      let x = this.dog.x
      let w = this.forest.width

      if ( x <= 0 || x >= ( w - this.dog.width )){
        this.dog.step.x = - this.dog.step.x
      }

    },

    'dog.y' : function(){
      let y = this.dog.y
      let h = this.forest.height

      if ( y <= 0 || y >= ( h - this.dog.height )){
        this.dog.step.y = - this.dog.step.y
      }

    },

    'dog.与狐狸的距离': function( val ){
      let min_d = this.dog.width / 2 + this.fox.width / 2
      if( val < min_d ) {
        this.dog.抓捕成功 = true
        this.dog.logs.push( this.dog.抓捕时间 )
      }
    },

    'dog.抓捕成功': function( val ){
      if( val ){
        this.fox.class = 'animated rotateOut'
      } else {
        this.fox.class = ''
        this.dog.class = ''
      }
    },

    'dog.logs': function(val){
      let sum = 0
      for( s of val ) sum += s
      this.dog.平均抓捕时间 = Math.round( sum / val.length * 100 ) / 100
    }

  }
})

// 计算平面中两点之间的距离
function getDistanceBetweenTwoPoints( x1, y1, x2, y2 ){
  let a = x1 - x2
  let b = y1 - y2

  let result = Math.sqrt( Math.pow( a, 2) + Math.pow( b, 2 ) )

  return Math.round( result )

}